<template>
   <div class="title">
        <div class="title-left">
             <slot></slot>
        </div>
       <div class="title-center">
           <h3>分类</h3>
       </div>
       <div class="search">
           <div class="search_left">
               
           </div>
           <input type="text" value="搜索" /><van-icon name="search" style="position:absolute; top:32%;left:40%;" color="#aaa" size="20"/>
           <div class="search_right"></div>
       </div>
    </div>
</template>

<script>
export default {
    name: 'HomeTitle',

    data() {
        return {
            
        };
    },

    mounted() {
        
    },

    methods: {
        
    },
};
</script>

<style lang="less" scoped>
 .title{
        width:100%;
        background:rgb(235,68,80);
    }
    .title-center{
        color:white;
        width:100%;
        h3{
            width:100%;
            height:50px;
            text-align:center;
            line-height:50px;font-size:20px;
        }
    }
    .search{
        width:100%;
        display:flex;
        justify-content:space-between;position:relative;
        input{
            width:100%;
            height:30px;
            text-align:center;
            color:#aaa;border:none;border-radius:5px;
            margin:10px 0; font-size:14px;
        }
        .search_left,.search_right{
            width:10px;
        }
    }
</style>